<template>
	<view>
		<tn-nav-bar :isBack='false' :backTitle='" "' bottomShadow :alpha="alpha">
			<view class="tn-flex tn-flex-col-center">
				<view class="sosuo" :style="{background:alpha?'#FEFEFE':'#F7F8F8',width:w}">
					<image src="/static/shop/sousuo.png" class="sosuo__icon" mode=""></image>
					搜索关键词
				</view>
				<view class="" style="width: 2rpx;" slot="right">

				</view>
			</view>
		</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		<loading v-if="loading"></loading>
		<view class="" v-else>
			<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="con">
				<!-- 轮播图 -->
				<view class="swp">
					<tn-swiper :list="list" :height='304' :radius='30' mode='none' @click="clickbanner"></tn-swiper>
				</view>
				<!-- 公告 -->
				<view class="" style="margin-top: 35rpx;">
					<tn-notice-bar v-if="list1[0]" :list="list1" mode="horizontal" :radius='10' padding='17rpx 26rpx'
						rightIcon backgroundColor="#f4fff7" :leftIcon="false" fontColor="#473E3C"
						:fontSize='24'></tn-notice-bar>
				</view>
			</view>
			<view class="list">
				<view class="" v-for="(item,index) in cardlist" :key="'card'+index" @click="to('/pages/product/details?id='+item.id+'&type=3')">
					<product-item :item='item'></product-item>
				</view>
				
				<!-- <view class="" v-for="(item,index) in shoplist" :key="'product'+index" @click="to('/pages/product/details?id='+item.id+'&type=2')">
					<product-item :item='item'></product-item>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import product from '@/api/_product.js'
	import {BASE_URL} from '@/api/config.js'
	export default {
		name: 'lvyou',
		props: {
			alpha: {
				default: true,
				type: Boolean
			},
		},
		data() {
			return {
				list: [],
				list1: [''],
				shoplist:[],
				cardlist:[],
				w: '690rpx',
				loading:true,
				
			};
		},
		created() {
			// 获取胶囊信息
			// #ifdef MP-WEIXIN
			let custom = wx.getMenuButtonBoundingClientRect()
			console.log(custom)
			this.w = `calc(${custom.left}px - 60rpx)`
			// #endif
			this.getlist()
			this.gethomedata()
		},
		methods:{
			clickbanner(e){
				this.to('/pages/product/bannerlink?configName=bannerlink')
			},
			getlist(){
				product.readConfig({configName:'shopNotice'}).then(res=>{
					if(res.data.code==1){
						this.list1[0] = res.data.data.shopNotice
					}
				})
				
				product.getGoods().then(res=>{
					if(res.data.code==1){
						res.data.data.card.map(t=>{
							t.imgs=t.images.split(',').filter(Boolean)
						})
						this.cardlist=res.data.data.card
						this.loading=false
					}
				})
			},
			async gethomedata() {
				let result = await this.$tn.http.get(BASE_URL + '/api/index/initData')
				this.list=[]
				result.data.data.shopBanner[0].images.split(',').filter(Boolean).map(t => {
					this.list.push({
						image: this.URL(t)
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8F8;
	}

	.sosuo {
		width: 690rpx;
		height: 73rpx;
		background: #FEFEFE;
		border-radius: 37rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #979797;
		line-height: 28rpx;
		
		
		&__icon{
			width: 30rpx;
			height: 30rpx;
			margin-left: 37rpx;
			margin-right: 13rpx;
		}
	}

	.con {
		padding: 30rpx;
		margin-top: 23rpx;
		background-color: #fff;
	}

	.swp {
		box-shadow: 0rpx 7rpx 32rpx 0rpx rgba(2, 102, 44, 0.28);
		border-radius: 30rpx;
	}

	.list {
		padding: 27rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
</style>